<template>
	<view>
		<view class="bg">
			<view class="userInfo">
				<view class="avator fcc" @click="toPath({ path: '/pages/login/login' })">
					<image class="img" src="https://img.js.design/assets/img/668cddf9b375c36d9e24f434.webp#905e6a26dbadba1ec0baa08fd6dab4e1" mode=""></image>
				</view>
				<view class="info" @click="toPath({ path: '/pages/user-info/user-info' })">
					<view class="nickname">
						用户昵称
					</view>
					<view class="id">
						ID:15661511565
					</view>
				</view>
			</view>
		</view>
		<view class="box" style="margin-top: -120rpx;">
			<view class="title">
				查询记录
			</view>
			<view class="nav">
				<view class="item" v-for="(item, index) in nav1" :key="index" @click="toPath(item)">
					<view class="img fcc">
						<image class="img" :src="item.icon" mode="heightFix"></image>
					</view>
					<view class="label fcc">
						{{ item.label }}
					</view>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="title">
				变更操作
			</view>
			<view class="nav">
				<view class="item" v-for="(item, index) in nav2" :key="index" @click="toPath(item)">
					<view class="img fcc">
						<image class="img" :src="item.icon" mode="heightFix"></image>
					</view>
					<view class="label fcc">
						{{ item.label }}
					</view>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="title">
				申请加盟
			</view>
			<view class="nav">
				<view class="item" v-for="(item, index) in nav3" :key="index" @click="toPath(item)">
					<view class="img fcc" v-if="item.icon">
						<image class="img" :src="item.icon" mode="heightFix"></image>
					</view>
					<view class="label fcc" v-if="item.icon">
						{{ item.label }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nav1: [
					{
						label: '订单查询',
						icon: require('@/static/img/n1-1.png'),
						path: '/pages/order/list'
					},
					{
						label: '配送记录',
						icon: require('@/static/img/n1-2.png'),
						path: '/pages/delivery-record/delivery-record'
					},
					{
						label: '余奶查询',
						icon: require('@/static/img/n1-3.png'),
						path: '/pages/margin/margin'
					}
				],
				nav2: [
					{
						label: '临时停奶',
						icon: require('@/static/img/n2-1.png'),
						path: '/pages/order/list?type=0'
					},
					{
						label: '恢复送奶',
						icon: require('@/static/img/n2-2.png'),
						path: '/pages/order/list?type=1'
					},
					{
						label: '地址管理',
						icon: require('@/static/img/n2-3.png'),
						path: '/pages/address/address'
					},
					{
						label: '申请退款',
						icon: require('@/static/img/n2-4.png'),
						path: '/pages/order/list?type=4'
					}
				],
				nav3: [
					{
						label: '申请加盟',
						icon: require('@/static/img/n3-1.png'),
						path: '/pages/to-join/to-join'
					},
					{},
					{},
					{}
				]
			};
		},
		methods: {
			toPath(item) {
				uni.navigateTo({
					url: item.path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.box {
	width: 710rpx;
	height: 254rpx;
	margin: 20rpx auto 0;
	border-radius: 10px;
	padding: 25rpx 28rpx;
	background-color: #FFF;
	.nav {
		display: flex;
		margin-top: 40rpx;
		.item {
			flex: 1;
			.label {
				font-size: 24rpx;
				color: #333333;
				font-weight: 400;
				margin-top: 26rpx;
			}
			.img {
				height: 48rpx;
			}
		}
	}
	.title {
		font-size: 30rpx;
		font-weight: 700;
		color: #333333;
	}
}
.bg {
	width: 100%;
	height: 498rpx;
	background-image: url();
	.userInfo {
		padding-top: 200rpx;
		padding-left: 48rpx;
		display: flex;
		align-items: center;
		.info {
			.id {
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				font-weight: 500;
			}
			.nickname {
				font-size: 34rpx;
				color: #FFFFFF;
				font-weight: 500;
			}
		}
		.avator {
			width: 126rpx;
			height: 126rpx;
			border-radius: 50%;
			border: 4rpx solid #FFF;
			margin-right: 26rpx;
			.img {
				width: 122rpx;
				height: 122rpx;
				border-radius: 50%;
			}
		}
	}
}
</style>
